<template>
	<layout>
		<warm></warm>
		<view class="main-content">
			<!-- 查询区域 -->
			<view class="search-section">
				<view class="search-header">
					<view class="title-area">
						<text class="title">管理费查询</text>
					</view>
					<text class="subtitle">温馨提示：请至少填写一项查询信息</text>
				</view>

				<view class="search-form">
					<view class="form-group">
						<view class="form-item">
							<text class="label">选择园区</text>
							<view class="input-wrapper">
								<uni-icons type="location-filled" size="18" color="#666"></uni-icons>
								<uni-data-picker :border="false" v-model="parkArea" :localdata="parkOptions" placeholder="请选择园区" popup-title="选择园区" @change="handleAreaChange" />
							</view>
						</view>
					</view>

					<view class="form-group">
						<view class="form-item">
							<text class="label">逝者信息</text>
							<view class="input-wrapper">
								<uni-icons type="person-filled" size="18" color="#666"></uni-icons>
								<uni-easyinput :inputBorder="false" v-model="queryParams.szxm" placeholder="请输入逝者姓名" />
							</view>
						</view>
					</view>

					<view class="form-group">
						<view class="form-item">
							<text class="label">家属信息</text>
							<view class="input-row">
								<view class="input-wrapper flex-1">
									<uni-icons type="contact-filled" size="18" color="#666"></uni-icons>
									<uni-easyinput :inputBorder="false" v-model="queryParams.xm" placeholder="请输入家属姓名" />
								</view>
								<view class="input-wrapper flex-1">
									<uni-icons type="phone-filled" size="18" color="#666"></uni-icons>
									<uni-easyinput :inputBorder="false" v-model="queryParams.lxdh" placeholder="请输入联系电话" />
								</view>
							</view>
						</view>
					</view>

					<view class="search-actions">
						<button class="reset-btn" @click="handleReset">
							<uni-icons type="refresh" size="18" color="#666"></uni-icons>
							<text>重置查询</text>
						</button>
						<button class="search-btn" type="primary" @click="handleSearch">
							<uni-icons type="search" size="18" color="#fff"></uni-icons>
							<text>开始查询</text>
						</button>
					</view>

					<view class="quick-tips">
						<!-- <view class="tip-item">
							<uni-icons type="info-filled" size="14" color="#808080"></uni-icons>
							<text>温馨提示：请至少填写一项查询信息</text>
						</view> -->
						<view class="tip-item">
							<uni-icons type="help" size="14" color="#999"></uni-icons>
							<text>未找到对应园区可点击立即刷新按钮</text>
							<view class="refresh-link" @click="handleRefreshParkData">
								<uni-icons type="refresh" size="14" color="#4a90e2"></uni-icons>
								<text>立即刷新</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 查询结果 -->
			<view class="result-section">
				<view class="result-header">
					<view class="header-left">
						<uni-icons type="list" size="20" color="#666"></uni-icons>
						<text class="result-title">查询结果</text>
						<text class="result-count">(共找到 {{ searchResultsCount }} 条记录)</text>
					</view>
					<view class="header-right">
						<text class="update-time">更新时间：{{ refreshTime }}</text>
					</view>
				</view>
				<view class="result-grid-container">
					<!-- 结果为空显示 -->
					<view class="empty-result" v-if="searchResultsEmpty">
						<image src="/static/images/empty.png" mode="aspectFit" class="empty-icon" />
						<text class="empty-text">暂无查询结果</text>
						<text class="empty-desc">请调整查询条件后重试</text>
					</view>

					<!-- 结果列表 -->
					<view class="result-grid">
						<view class="result-card" v-for="(item, index) in searchResults" :key="index">
							<view class="card-decoration">
								<view class="corner-pattern"></view>
								<view class="side-line"></view>
							</view>

							<view class="card-header">
								<view class="location-wrapper">
									<uni-icons type="location" size="16" color="#606c88"></uni-icons>
									<text class="location">{{ item.name }}</text>
								</view>
								<view :class="['status-tag', item.isExpired ? 'expired' : 'normal']">
									<uni-icons :color="item.isExpired ? '#ff4d4f' : '#606c88'" :type="item.isExpired ? 'notification-filled' : 'checkmark'" size="12"></uni-icons>
									<text>{{ item.isExpired ? '已过期' : '正常' }}</text>
								</view>
							</view>

							<view class="card-body">
								<view class="info-row deceased-list">
									<view class="info-icon">
										<uni-icons type="person-filled" size="16" color="#606c88"></uni-icons>
									</view>
									<view class="info-content">
										<text class="label">安葬人员：</text>
										<view class="deceased-names">
											<text> {{ getNames(item.if5r1SzxxList) }}</text>
										</view>
									</view>
								</view>
								<view class="info-row deceased-list">
									<view class="info-icon">
										<uni-icons type="auth-filled" size="16" color="#606c88"></uni-icons>
									</view>
									<view class="info-content">
										<text class="label">家属姓名：</text>
										<view class="deceased-names">
											<text> {{ item.xm }} </text>
										</view>
									</view>
								</view>
								<view class="info-row deceased-list">
									<view class="info-icon">
										<uni-icons type="phone-filled" size="16" color="#606c88"></uni-icons>
									</view>
									<view class="info-content">
										<text class="label">联系电话：</text>
										<view class="deceased-names">
											<text> {{ setPhone(item.lxdh) }} </text>
										</view>
									</view>
								</view>
								<view class="info-row expiry-info">
									<view class="info-icon">
										<uni-icons type="calendar-filled" size="16" color="#606c88"></uni-icons>
									</view>
									<view class="info-content">
										<view class="label">管理费到期：</view>
										<view v-if="item.yxrq" :class="['date', item.isExpired ? 'expired-text' : '']">
											{{ item.yxrq }}
										</view>
										<view v-else class="no-expired-text">
											<text>未设置管理费到期时间</text>
										</view>
									</view>
								</view>
							</view>

							<view class="card-footer">
								<template v-if="item.yxrq">
									<button :class="['action-btn', item.isExpired ? 'expired-btn' : 'normal-btn']" @click="handleViewDetail(item)">
										<uni-icons :type="item.isExpired ? 'refresh-filled' : 'plus'" size="14" color="#fff"></uni-icons>
										<text>{{ item.isExpired ? '立即续费' : '续交' }}</text>
									</button>
								</template>
								<template v-else>
									<button class="action-btn detail-btn" @click="handleViewDetail(item)">
										<uni-icons type="info" size="18" color="#fff"></uni-icons>
										<text>查看详情</text>
									</button>
								</template>
							</view>
						</view>
					</view>
				</view>
				<view class="pagination-container">
					<uni-pagination :total="searchResultsCount" :page-size="queryParams.pageSize" :current="queryParams.pageNum" @change="handlePaginationChange"></uni-pagination>
				</view>
			</view>
		</view>
		<!-- 查看详情弹窗 -->
		<uni-popup ref="detailPopup" type="center" :mask-click="false">
			<view class="detail-popup detail-popup-manage">
				<!-- 弹窗头部 -->
				<view class="popup-header">
					<text class="title">墓位详情信息</text>
					<uni-icons @click="handleCloseDetail" type="close" size="20" color="#fff"></uni-icons>
				</view>

				<!-- 弹窗内容 -->
				<view class="popup-content" v-if="currentDetail">
					<!-- 主要信息 -->
					<view class="main-info">
						<view class="info-header">
							<view class="location-tag">
								<uni-icons type="location-filled" size="16" color="#606c88"></uni-icons>
								<text>{{ currentDetail.name }}</text>
							</view>
							<view :class="['status-badge', currentDetail.isExpired ? 'expired' : 'active']">
								<uni-icons :color="currentDetail.isExpired ? '#ff4d4f' : '#606c88'" :type="currentDetail.isExpired ? 'notification-filled' : 'checkmark'" size="14"></uni-icons>
								<text>{{ currentDetail.isExpired ? '已过期' : '正常' }}</text>
							</view>
						</view>
					</view>

					<view style="display: flex; gap: 15px">
						<!-- 安葬信息 -->
						<view class="detail-section">
							<view class="section-header">
								<uni-icons type="person-filled" size="16" color="#606c88"></uni-icons>
								<text>安葬信息</text>
							</view>
							<view class="deceased-list">
								<view class="deceased-item" v-for="(name, idx) in currentDetail.if5r1SzxxList" :key="idx">
									<text class="name">{{ name.szxm }}</text>
								</view>
							</view>
						</view>

						<!-- 家属信息 -->
						<view class="detail-section">
							<view class="section-header">
								<uni-icons type="contact-filled" size="16" color="#606c88"></uni-icons>
								<text>家属信息</text>
							</view>
							<view class="contact-info">
								<view class="info-item">
									<text class="label">联系人：</text>
									<view class="value-wrapper">
										<uni-icons type="contact" size="16" color="#606c88"></uni-icons>
										<text class="value">{{ currentDetail.xm || '暂无联系人信息' }}</text>
									</view>
								</view>
								<view class="info-item">
									<text class="label">联系电话：</text>
									<view class="value-wrapper">
										<uni-icons type="phone" size="16" color="#606c88"></uni-icons>
										<text class="value">{{ setPhone(currentDetail.lxdh) || '暂无联系电话' }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 费用信息 -->
					<view class="detail-section">
						<view class="section-header">
							<uni-icons type="wallet-filled" size="16" color="#606c88"></uni-icons>
							<text>费用信息</text>
						</view>
						<template v-if="currentDetail.yxrq && currentDetail.glf">
							<view class="fee-info">
								<view class="fee-item">
									<text class="label">管理费：</text>
									<view class="fee-value">
										<text class="currency">¥</text>
										<text class="amount">{{ currentDetail.glf }}</text>
										<!-- <text class="unit">/年</text> -->
									</view>
								</view>
								<view class="divider"></view>
								<view class="fee-item">
									<text class="label">到期时间：</text>
									<view class="date-value">
										<text :class="['value', currentDetail.isExpired ? 'expired-text' : '']">
											{{ currentDetail.yxrq }}
										</text>
										<view v-if="currentDetail.isExpired" class="expired-tag">
											<uni-icons type="notification-filled" size="12" color="#ff4d4f"></uni-icons>
											<text>已过期</text>
										</view>
									</view>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="empty-fee">
								<image src="/static/images/empty-set.png" mode="aspectFit"></image>
								<text class="empty-fee-title">暂未设置管理费信息</text>
								<text class="empty-fee-desc">如需了解详细费用信息，请联系客服咨询</text>
							</view>
						</template>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="popup-footer">
					<button class="close-btn" @click="handleCloseDetail">
						<uni-icons type="close" size="18" color="#fff"></uni-icons>
						<text>关闭详情</text>
					</button>
					<template v-if="currentDetail?.yxrq && currentDetail?.glf">
						<button class="renew-btn" @click="handleRenewal(currentDetail)">
							<uni-icons type="refresh-filled" size="18" color="#fff"></uni-icons>
							<text>立即续费</text>
						</button>
					</template>
				</view>
			</view>
		</uni-popup>

		<!-- 续费弹框 -->
		<uni-popup ref="renewalPopup" type="center" :mask-click="false">
			<view class="renewal-popup detail-popup-manage">
				<!-- 弹窗头部 -->
				<view class="popup-header">
					<text class="title">管理费续交</text>
					<uni-icons @click="handleCloseRenewal" type="close" size="20" color="#fff"></uni-icons>
				</view>

				<!-- 弹窗内容 -->
				<view class="popup-content">
					<!-- 费用明细 -->
					<view class="fee-detail-section">
						<view class="fee-title">
							<view class="fee-icon">
								<text>请仔细核对以下信息，确认无误后点击立即缴费。</text>
							</view>
							<view class="fee-subtitle">
								<text>缴费成功后系统将自动为您更新管理费到期时间</text>
							</view>
						</view>

						<view class="section-header">
							<uni-icons type="wallet-filled" size="16" color="#606c88"></uni-icons>
							<text>费用明细</text>
						</view>
						<view class="fee-card">
							<view class="fee-row">
								<text class="label">墓位位置</text>
								<view class="value-wrapper">
									<uni-icons type="location-filled" size="16" color="#606c88"></uni-icons>
									<text class="value">{{ renewalData.name }}</text>
								</view>
							</view>
							<view class="fee-row">
								<text class="label">管理费</text>
								<view class="fee-amount">
									<view class="amount-tag">
										<text class="currency">¥</text>
										<text class="number">{{ renewalData.glf }}</text>
									</view>
									<!-- <text class="unit">/年</text> -->
								</view>
							</view>
							<view class="fee-row" v-if="false">
								<text class="label">续费年限</text>
								<view class="year-selector">
									<button v-for="year in [1, 3, 5, 10]" :key="year" :class="['year-btn', selectedYears === year ? 'active' : '']" @click="selectedYears = year">
										<text class="year-text">{{ year }}</text>
										<text class="year-unit">年</text>
									</button>
								</view>
							</view>
							<view class="fee-row total" v-if="false">
								<text class="label">应付金额</text>
								<view class="total-amount">
									<view class="amount-wrapper">
										<text class="currency">¥</text>
										<text class="number">{{ totalAmount }}</text>
									</view>
									<view class="total-tag">总计</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 办理人信息 -->
					<view class="handler-section">
						<view class="section-header">
							<uni-icons type="person-filled" size="16" color="#606c88"></uni-icons>
							<text>办理人信息</text>
						</view>
						<view class="form-group">
							<view class="input-item">
								<text class="label">办理人姓名</text>
								<view class="input-wrapper">
									<uni-icons type="contact" size="16" color="#606c88"></uni-icons>
									<input v-model="queryParams.xfr" placeholder="请输入办理人姓名" class="input" />
								</view>
							</view>
							<view class="input-item">
								<text class="label">联系电话</text>
								<view class="input-wrapper">
									<uni-icons type="phone" size="16" color="#606c88"></uni-icons>
									<input v-model="queryParams.xfrlxdh" placeholder="请输入联系电话" class="input" />
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部按钮 -->
				<view class="popup-footer">
					<button class="cancel-btn" @click="handleCloseRenewal">
						<uni-icons type="close" size="18" color="#fff"></uni-icons>
						<text>关闭缴费</text>
					</button>
					<button class="confirm-btn" @click="handleConfirmPayment">
						<uni-icons type="wallet" size="18" color="#fff"></uni-icons>
						<text>立即支付</text>
					</button>
				</view>
			</view>
		</uni-popup>

		<!-- 支付二维码弹窗 -->
		<uni-popup ref="qrcodePopup" type="center" :mask-click="false">
			<view class="qrcode-popup detail-popup-manage">
				<!-- 弹窗头部 -->
				<view class="popup-header">
					<text class="title">扫码支付</text>
					<uni-icons @click="handleCloseQrcode" type="close" size="20" color="#fff"></uni-icons>
				</view>

				<!-- 弹窗内容 -->
				<view class="popup-content">
					<view class="payment-info">
						<view class="left-section">
							<view class="amount-display">
								<view class="label">
									<uni-icons type="wallet-filled" size="20" color="#fff"></uni-icons>
									<text>需支付金额</text>
								</view>
								<view class="amount">
									<text class="currency">¥</text>
									<text class="number">{{ renewalData.glf }}</text>
								</view>
							</view>

							<view class="countdown-section">
								<view class="countdown-ring" :class="{ warning: remaining <= 10 }">
									<text class="time" :class="{ 'warning-text': remaining <= 10 }">{{ remaining }}</text>
									<text class="unit" :class="{ 'warning-text': remaining <= 10 }">秒</text>
								</view>
								<!-- <view class="countdown-text" :class="{ 'warning-text': remaining <= 10 }"> 请在规定时间内完成支付 </view> -->
							</view>
							<view class="payment-tips">
								<view class="tip-header">
									<view class="icon">
										<uni-icons type="info-filled" size="12" color="#ff4d4f"></uni-icons>
									</view>
									<text class="text">温馨提示</text>
								</view>
								<view class="tip-list">
									<view class="tip-item">
										<view class="dot"></view>
										<text>请在{{ PAYMENT_TIMEOUT }}秒内完成支付</text>
									</view>
									<view class="tip-item">
										<view class="dot"></view>
										<text>支付成功后请勿关闭页面</text>
									</view>
									<view class="tip-item">
										<view class="dot"></view>
										<text>如遇问题请联系客服处理</text>
									</view>
								</view>
							</view>
						</view>

						<view class="right-section">
							<view class="qrcode-container">
								<image class="qrcode" :src="qrcodeUrl" mode="aspectFit"></image>
								<view class="scan-tips">
									<view class="scan-icon-wrapper">
										<uni-icons type="scan" size="24" color="#fff"></uni-icons>
									</view>
									<view class="scan-text-wrapper">
										<text class="primary-text">请使用微信扫一扫</text>
										<text class="secondary-text">扫码完成支付</text>
									</view>
								</view>
								<view class="payment-error-tip">
									<uni-icons type="info-filled" size="14" color="#ff4d4f"></uni-icons>
									<view class="payment-error-tip-text">
										<text>微信支付二维码未生成</text>
										<text>请关闭弹窗重新发起支付</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部按钮 -->
				<view class="popup-footer">
					<button class="cancel-btn" @click="handleCloseQrcode">
						<uni-icons type="close" size="14" color="#fff"></uni-icons>
						<text>取消支付</text>
					</button>
				</view>
			</view>
		</uni-popup>
	</layout>
	<Loading ref="loadingRef" :show="loading" :theme="loadingTheme" :showCountdown="loadingShowCountdown" :duration="loadingCountdown" @timeRemaining="handleLoadingTimeRemaining" @timeout="handleLoadingTimeout" />
	<prompt-box :visible="showPrompt" :message="promptMessage" :subMessage="promptSubMessage" :type="promptType" :duration="promptDuration" @close="handlePromptClose" @timeout="handlePromptTimeout"></prompt-box>
	<uni-popup ref="promptDialog" type="dialog">
		<uni-popup-dialog type="warn" title="确认支付" mode="3" cancelText="暂不支付" confirmText="确认支付" @confirm="handleDialogConfirmPayment" @close="handleDialogClose">
			<template v-slot:content>
				<view class="dialog-content detail-popup-manage">
					<view class="dialog-info">
						<view class="info-item">
							<text class="label">墓位位置：</text>
							<text class="value">{{ renewalData.name }}</text>
						</view>
						<view class="info-item">
							<text class="label">应付金额：</text>
							<view class="amount">
								<text class="currency">¥</text>
								<text class="number">{{ renewalData.glf }}</text>
							</view>
						</view>
					</view>
					<view class="dialog-tips">
						<uni-icons type="info-filled" size="14" color="#999"></uni-icons>
						<text>确认信息无误后，点击确认支付</text>
					</view>
				</view>
			</template>
		</uni-popup-dialog>
	</uni-popup>

	<!-- 打印发票弹窗 -->
	<uni-popup ref="printInvoicePopup" type="center" :mask-click="false">
		<uni-popup-dialog type="success" title="打印发票" mode="3" cancelText="暂不打印" confirmText="确认打印" @confirm="handleDialogConfirmPrint" @close="handleDialogClosePrint">
			<template v-slot:content>
				<view class="dialog-content">
					<view class="dialog-info">
						<view class="info-item">
							<text class="label">墓位位置：</text>
							<text class="value">{{ renewalData.name }}</text>
						</view>
						<view class="info-item">
							<text class="label">到期日期：</text>
							<view class="amount">
								<text class="number">{{ renewalData.yxrq }}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</uni-popup-dialog>
	</uni-popup>
	<InvoicePreview ref="invoicePreviewRef" @printSuccess="handlePrintSuccess" @close="handleCloseInvoicePreview" :invoiceUrl="invoiceResultUrl" />
	<back></back>
	<IdleLogout />
</template>

<script setup>
	const { ipcRenderer } = require('electron');

	// 引入二维码
	import QRCode from 'qrcode';

	// 园区选项数据
	const parkArea = ref('');

	// 园区选项数据
	const parkOptions = ref([]);

	// 查询数据参数
	const queryParams = ref({
		pageNum: 1,
		pageSize: 6,
		gs: useCompanyStore().GetCurCompanyInfo().bm,
		xm: '',
	});

	// 搜索结果
	const searchResults = ref([]);

	// 搜索结果总数
	const searchResultsCount = ref(0);

	// 搜索结果为空
	const searchResultsEmpty = ref(true);

	// 刷新时间
	const refreshTime = ref('00:00:00');

	// 详情弹窗
	const detailPopup = ref(null);

	// 详情数据
	const currentDetail = ref(null);

	// 续费弹窗
	const renewalPopup = ref(null);

	// 续费数据
	const renewalData = ref({});

	// 支付超时时间（秒）
	const PAYMENT_TIMEOUT = 90;
	// const PAYMENT_TIMEOUT = 900;

	// 倒计时
	const countdown = ref(PAYMENT_TIMEOUT);

	// 加载中
	const loading = ref(false);

	// 加载中
	const loadingRef = ref(null);

	// 加载主题
	const loadingTheme = ref('default');

	// 加载中倒计时
	const loadingCountdown = ref(60);

	// 加载中倒计时是否显示
	const loadingShowCountdown = ref(false);

	// 支付成功弹窗
	const showPrompt = ref(false);

	// 支付成功弹窗
	const promptMessage = ref('');

	// 支付成功弹窗副标题
	const promptSubMessage = ref('');

	// 支付成功弹窗持续时间
	const promptDuration = ref(0);

	// 支付成功弹窗类型
	const promptType = ref('');

	// 支付二维码弹窗
	const qrcodePopup = ref(null);

	// 二维码
	const qrcodeUrl = ref('');

	// 续费年限
	const selectedYears = ref(1);

	// 支付弹窗
	const promptDialog = ref(null);

	// 打印发票弹窗
	const printInvoicePopup = ref(null);

	// 发票预览弹窗
	const invoicePreviewRef = ref(null);

	// 发票预览结果
	const invoiceResultUrl = ref('');

	// 计算总金额
	const totalAmount = computed(() => {
		return (renewalData.value?.glf || 0) * selectedYears.value;
	});

	/**
	 * 获取名字
	 * @param {Array} array 名字数组
	 * @returns {String} 名字
	 */
	const getNames = (array) => {
		return array && array.length ? array.map((item) => item.szxm).join('、') : '-';
	};

	/**
	 * 设置文本掩码
	 * @param {String} phone 手机号
	 * @returns {String} 掩码后的手机号
	 */
	const setPhone = (phone) => {
		return phone ? UTILSetTextMask(phone, '###****####') : '-';
	};

	/**
	 * 计算日期是否过期
	 * @param {String} date 日期
	 * @returns {Boolean} 是否过期
	 */
	const isDateExpired = (date) => {
		return UTILIsDateExpired(date);
	};

	/**
	 * 生成二维码的方法
	 * @param {String} text 二维码内容
	 */
	const generateQRCode = async (text) => {
		try {
			// 生成二维码数据 URL
			const url = await QRCode.toDataURL(text, {
				width: 200, // 二维码宽度
				margin: 2, // 边距
				color: {
					dark: '#353535', // 修改为微信标准的深灰色
					light: '#ffffff',
				},
				errorCorrectionLevel: 'H', // 容错级别 L,M,Q,H
			});
			qrcodeUrl.value = url;
		} catch (err) {
			console.error('二维码生成失败:', err);
			uni.showToast({ title: '二维码生成失败', icon: 'none' });
		}
	};

	/**
	 * 处理查看详情操作
	 * @param {Object} item 墓位信息
	 */
	const handleViewDetail = async (item) => {
		const { code, data } = await ApiGetCemeteryDetail(item.id);
		if (code === 200) {
			data.isExpired = isDateExpired(data.yxrq);
			currentDetail.value = data;
			detailPopup.value.open();
		}
	};

	// 关闭详情弹窗
	const handleCloseDetail = () => {
		detailPopup.value.close();
	};

	// 处理续费操作
	const handleRenewal = (item) => {
		renewalData.value = item;
		queryParams.value.xfr = item.xm;
		queryParams.value.xfrlxdh = item.lxdh;
		renewalPopup.value.open();
	};

	// 关闭续费弹窗
	const handleCloseRenewal = () => {
		renewalPopup.value.close();
	};

	// 修改关闭二维码弹窗方法
	const handleCloseQrcode = () => {
		console.log('🚀 ~ handleCloseQrcode ~ qrcodePopup.value:', qrcodePopup.value);
		stop(); // 停止倒计时
		qrcodePopup.value.close();
		countdown.value = PAYMENT_TIMEOUT;
	};

	// 显示加载中
	const showLoading = (options = {}) => {
		const { countdown = false, type = 'error', duration = 0, show = true } = options;
		loadingTheme.value = type;
		loadingShowCountdown.value = countdown;
		loadingCountdown.value = duration;
		loading.value = show;
	};

	// 加载初始化初始化
	const handleInitLoading = () => {
		loadingRef.value?.stop();
		showLoading({ show: false, type: 'default', countdown: false });
	};

	/**
	 * 处理加载中倒计时
	 * @param {Number} time 倒计时时间
	 */
	const handleLoadingTimeRemaining = (time) => {
		console.log('🚀 ~ handleTimeRemaining ~ remaining:', time);
		if (time % 3 === 0 && loadingTheme.value == 'payment-result') getRenewalPaymentResult(false); // 每3秒获取一次缴费结果
		else if (time % 3 === 0 && loadingTheme.value == 'invoice') getInvoiceResult(false); // 每3秒获取一次发票结果
	};

	/**
	 * 处理加载中完成倒计时
	 */
	const handleLoadingTimeout = () => {
		console.log('🚀 ~ handleTimeout ~ timeout');
		// 获取缴费结果
		if (loadingTheme.value == 'payment-result') getRenewalPaymentResult(true); // 获取缴费结果
		else if (loadingTheme.value == 'invoice') getInvoiceResult(true); // 获取发票结果
		// 初始化加载
		handleInitLoading();
	};

	/**
	 * 显示提示信息
	 * @param {Object} { title = '', message = '', type = '', duration = 0, subMessage = '', show = true } 提示信息参数
	 */
	const showPromptMessage = (options = {}) => {
		const { title = '', message = '', type = '', duration = 0, subMessage = '', show = true } = options;
		promptMessage.value = title;
		promptType.value = type;
		promptSubMessage.value = subMessage || message;
		promptDuration.value = duration;
		showPrompt.value = show;
	};

	// 提示框初始化
	const handlePromptInit = () => {
		showPromptMessage({ show: false });
	};

	// 支付成功弹窗
	const handlePromptClose = () => {
		console.log('Prompt closed');
		handlePromptInit();
	};

	/**
	 * 处理提示框超时
	 * @param {String} type 提示框类型
	 */
	const handlePromptTimeout = (type) => {
		console.log('Prompt timeout:', type);
		switch (type) {
			case 'pay-timeout':
			case 'renew-timeout':
				handlePromptInit();
				break;
			case 'success':
				// 关闭所有弹出框
				handleCloseAll();
				// 提示框初始化
				handlePromptInit();
				renewalData.value.yxrq = UTILAddYear(renewalData.value.yxrq, 10);
				// 打印发票弹窗
				printInvoicePopup.value.open('center');
				break;
			case 'pay-success':
				// 提示框初始化
				handlePromptInit();
				showLoading({ type: 'payment-result', duration: 60, countdown: true });
				break;
		}
	};

	const handleCloseAll = () => {
		handleCloseQrcode();
		handleCloseRenewal();
		handleCloseDetail();
	};

	// 支付结果失败
	const handlePaymentResultError = (title, type, message) => {
		// 关闭支付弹窗
		handleCloseQrcode();
		// 显示支付失败弹窗
		showPromptMessage({
			title: title || '支付失败,支付存在异常',
			message: message || '请关闭弹窗重新支付',
			type: type || 'pay-error',
			duration: 4000,
		});
	};

	const handlePaymentResultSuccess = () => {
		// 支付成功
		handleCloseQrcode();

		// 显示支付成功弹窗
		showPromptMessage({ title: '支付成功', type: 'pay-success', duration: 4000 });
	};

	/**
	 * 微信结果倒计时
	 * @param {Number} countdown 倒计时时间
	 * @returns {Object} remaining 剩余时间
	 * @returns {Function} start 开始倒计时
	 * @returns {Function} stop 停止倒计时
	 */
	const { remaining, start, stop } = useCountdown(countdown.value, {
		controls: true,
		onComplete: () => {
			stop();
			getWxPaymentResult(true);
		},
		onTick: () => {
			console.log('支付倒计时时间:', remaining.value);
			if (remaining.value % 3 === 0) getWxPaymentResult(false); // 每3秒获取一次支付结果
		},
	});

	/**
	 * 获取微信支付结果
	 * @param {Boolean} complete 是否完成
	 */
	const getWxPaymentResult = async (complete) => {
		try {
			const params = {
				wxddh: renewalData.value.wxddh,
				gsbsKey: useCompanyStore().GetCurCompanyInfo().bsKey,
			};
			// 获取微信支付结果
			const { code, msg } = await ApiGetWxRenewalPaymentResult(params);
			console.log('🚀 ~ getWxPaymentResult ~ data:', { code, msg, complete });
			// 判断微信支付结果
			if (code === 200) {
				if (msg == 1) handlePaymentResultSuccess(); // 支付成功
				else if (msg == 2) handlePaymentResultError(); // 支付失败
				else if (complete && msg == 1) handlePaymentResultSuccess(); // 支付成功
				else if (complete && msg == 2) handlePaymentResultError(); // 支付失败
				else if (complete && msg == 0) handlePaymentResultError('支付超时', 'pay-timeout', '您已超时未支付，请关闭弹窗重新支付'); // 支付超时
			}
		} catch (error) {
			console.log('🚀 ~ getWxPaymentResult ~ error:', error);
			handlePaymentResultError();
		}
	};

	/**
	 * 续交缴费失败结果
	 * @param {String} title 标题
	 * @param {String} type 类型
	 * @param {String} message 消息
	 */
	const handleRenewalPaymentResultError = (title, type, message) => {
		handleCloseAll();
		showPromptMessage({
			title: title || '续交缴费失败',
			type: type || 'pay-error',
			message: message || '续交缴费失败,请联系客服',
			duration: 4000,
		});
	};

	// 续交缴费成功结果
	const handleRenewalPaymentResultSuccess = () => {
		// 停止加载中
		handleInitLoading();

		// 显示支付成功弹窗
		showPromptMessage({ title: '续交缴费成功', type: 'success', duration: 4000 });

		// 刷新列表
		init();
		getList();
	};

	/**
	 * 获取续交缴费结果
	 * @param {Boolean} complete 是否完成
	 */
	const getRenewalPaymentResult = async (complete) => {
		console.log('🚀 ~ getRenewalPaymentResult ~ complete:', complete);
		// 获取缴费结果
		try {
			const { code, msg } = await ApiGetRenewalPaymentResult(renewalData.value.orderId);
			console.log('🚀 ~ getRenewalPaymentResult ~ data:', msg + ' ' + code);
			if (code === 200) {
				console.log('🚀 ~ getRenewalPaymentResult ~ msg:', { code, msg, complete });
				if (msg == 1) handleRenewalPaymentResultSuccess(); // 续交缴费成功
				else if (msg == 2) handleRenewalPaymentResultError(); // 续交缴费失败
				else if (complete && msg == 1) handleRenewalPaymentResultSuccess(); // 续交缴费成功
				else if (complete && msg == 2) handleRenewalPaymentResultError(); // 续交缴费失败
				else if (complete && msg == 0) handleRenewalPaymentResultError('续交缴费结果超时', 'renew-timeout', '您的续交缴费结果超时，请联系客服');
			}
		} catch (error) {
			console.log('🚀 ~ getRenewalPaymentResult ~ error:', error);
			handleRenewalPaymentResultError();
		}
	};

	// 发票获取失败
	const handleInvoiceResultError = (title, message) => {
		handleInitLoading();
		showPromptMessage({
			title: title || '未开票',
			type: 'error',
			message: message || '您的发票结果通知未开票，请联系客服',
			duration: 4000,
		});
	};

	/**
	 * 发票获取成功
	 * @param {Object} data 发票数据
	 */
	const handleInvoiceResultSuccess = (data) => {
		handleInitLoading();
		invoiceResultUrl.value = data.split(':')[1];
		if (invoiceResultUrl.value) {
			setTimeout(() => {
				invoicePreviewRef.value?.open();
			}, 1000);
		}
	};

	// 确认打印
	const handleDialogConfirmPrint = () => {
		printInvoicePopup.value?.close();
		// 获取发票结果
		showLoading({ type: 'invoice', duration: 60, countdown: true });
	};

	const handleDialogClosePrint = () => {
		printInvoicePopup.value.close();
		init();
		getList();
	};

	// 打印成功
	const handlePrintSuccess = () => {
		console.log('🚀 ~ handlePrintSuccess ~ printInvoicePopup.value:', '打印成功');
		invoicePreviewRef.value.close();
		init();
		getList();
	};

	// 关闭发票预览弹窗
	const handleCloseInvoicePreview = () => {
		invoicePreviewRef.value.close();
		init();
		getList();
	};

	// 获取发票结果通知
	const getInvoiceResult = async (complete) => {
		try {
			// 获取发票结果通知
			const { code, data, msg } = await ApiGetInvoiceResultNotice({ id: renewalData.value.orderId });
			console.log('🚀 ~ getInvoiceResult ~ data:', { code, data, msg, complete });
			// 判断发票结果通知
			if (code == 200) {
				// 获取发票结果通知成功
				if (msg == 1) handleInvoiceResultSuccess(data); // 获取发票结果通知成功
				else if (msg == 2) handleInvoiceResultError(); // 获取发票结果通知失败
				else if (complete && msg == 1) handleInvoiceResultSuccess(data); // 获取发票结果通知成功
				else if (complete && msg == 2) handleInvoiceResultError(); // 获取发票结果通知失败
				else if (complete && msg == 0) handleInvoiceResultError('发票结果通知超时', '您的发票结果通知超时，请联系客服');
			}
		} catch (error) {
			console.error('发票结果通知失败:', error);
			handleInvoiceResultError('发票获取失败', '您的发票结果通知获取失败，请联系客服');
		}
	};

	// 修改确认支付方法
	const handleConfirmPayment = () => {
		// 如果办理人姓名和联系电话不存在，则返回
		if (!queryParams.value.xfr || !queryParams.value.xfrlxdh) return uni.showToast({ title: '请输入办理人姓名和联系电话', icon: 'none' });

		// 验证手机号
		if (!UTILValidatePhone(queryParams.value.xfrlxdh)) return uni.showToast({ title: '请输入正确的办理人联系电话', icon: 'none' });

		// 如果续交缴费金额不存在，则返回
		if (!renewalData.value?.glf) return uni.showToast({ title: '支付信息存在异常', icon: 'none' });
		// 显示确认支付弹窗
		promptDialog.value.open();
	};

	/**
	 * 确认支付
	 */
	const handleDialogConfirmPayment = async () => {
		try {
			// 显示加载中
			showLoading({ type: 'payment' });

			// 获取公司信息
			const companyInfo = useCompanyStore().GetCurCompanyInfo();

			const params = {
				gs: companyInfo.bm,
				gsbs: companyInfo.bs,
				gsbsKey: companyInfo.bsKey,
				xfr: queryParams.value.xfr,
				lxdh: queryParams.value.xfrlxdh,
				mw: renewalData.value.id,
				nx: 10,
				xfje: renewalData.value.glf,
				xfhqx: UTILAddYear(renewalData.value.yxrq, 10),
			};
			// 获取订单信息
			const orderResult = await ApiOrderRenewalPayment(params);
			console.log('🚀 ~ handleConfirmPayment ~ orderResult.data:', orderResult);
			if (orderResult.code === 200) {
				// 设置订单ID
				renewalData.value.orderId = orderResult.data;
				// 显示加载中
				showLoading({ type: 'qrcode' });

				// 获取设备信息
				const deviceInfo = await ipcRenderer.invoke('getDeviceInfo');
				console.log('🚀 ~ handleConfirmPayment ~ deviceInfo:', deviceInfo);

				// 生成序列号
				const sequenceNo = deviceInfo?.deviceId || new Date().getTime();

				// 生成支付二维码
				const payResult = await ApiRenewalPayment({ id: orderResult.data, sequenceNo });
				console.log('🚀 ~ handleConfirmPayment ~ payResult:', payResult);
				if (payResult.code === 200) {
					// 关闭续费弹窗
					renewalPopup.value.close();
					// 如果支付二维码存在，则生成支付二维码
					if (payResult.data.code_url) {
						console.log('🚀 ~ handleConfirmPayment ~ payResult.data.code_url:', payResult.data.code_url);
						// 生成支付二维码
						await generateQRCode(payResult.data.code_url);
						// 设置订单ID
						renewalData.value.wxddh = payResult.data.wxddh;
						// 打开支付弹窗
						qrcodePopup.value.open();
						// 重置倒计时时间
						countdown.value = PAYMENT_TIMEOUT;
						// 开始倒计时
						start();
					} else {
						uni.showToast({ title: '支付二维码获取失败', icon: 'none' });
					}
				}
			} else if (orderResult.code == 22006) {
				handleInitLoading();
				// 显示弹窗
				const modal = await uni.showModal({
					title: '系统提示',
					content: orderResult.msg,
					showCancel: false,
					confirmText: '知道了',
				});
				// 如果用户点击了确认，则关闭所有弹窗
				if (modal.confirm) handleCloseAll();
			} else if (orderResult.code == 22005) {
				handleInitLoading();
				// 显示弹窗
				const noPay = await uni.showModal({
					title: '系统提示',
					content: orderResult.msg,
					showCancel: false,
					confirmText: '知道了',
				});
				// 如果用户点击了确认，则关闭所有弹窗
				if (noPay.confirm) handleCloseAll();
			}
		} catch (error) {
			console.log('🚀 ~ handleConfirmPayment ~ error:', error);
			uni.showToast({ title: '续交缴费失败,请联系客服', icon: 'none' });
		} finally {
			handleInitLoading();
		}
	};

	// 关闭弹窗
	const handleDialogClose = () => {
		promptDialog.value.close();
	};

	/**
	 * 分页改变
	 * @param {*} item
	 */
	const handlePaginationChange = (item) => {
		console.log('🚀 ~ handlePaginationChange ~ item:', item);
		queryParams.value.pageNum = item.current;
		searchResultsEmpty.value = true;
		searchResults.value = [];
		getList();
	};

	// 查询方法
	const handleSearch = () => {
		// 判断是否填写了人员信息
		const hasPersonInfo = queryParams.value.szxm || queryParams.value.xm || queryParams.value.lxdh;

		// 是否选择了园区
		const hasParkArea = !!parkArea.value;

		// 检查条件
		// if (hasParkArea && !hasPersonInfo) return uni.showToast({ title: '选择园区后，请至少填写一项人员信息', icon: 'none' });
		// else if (!hasPersonInfo) return uni.showToast({ title: '请至少填写一项查询信息', icon: 'none' });

		if (!hasPersonInfo && !hasParkArea) return uni.showToast({ title: '请至少填写一项查询信息', icon: 'none' });

		init();
		getList();
	};

	// 重置查询
	const handleReset = () => {
		parkArea.value = '';
		queryParams.value.szxm = '';
		queryParams.value.xm = '';
		queryParams.value.lxdh = '';
		queryParams.value.mwy = '';
		queryParams.value.mwq = '';
		queryParams.value.mwp = '';
		init();
		// getList();
	};

	// 刷新数据
	const handleRefreshParkData = () => {
		getParkData();
	};

	/**
	 * 区域选择器
	 * @param {Object} e 事件对象
	 */
	const handleAreaChange = (e) => {
		console.log(e);
		queryParams.value.mwy = '';
		queryParams.value.mwq = '';
		queryParams.value.mwp = '';
		if (e.detail.value && e.detail.value.length) {
			queryParams.value.mwy = e.detail.value[0].text;
			queryParams.value.mwq = e.detail.value[1].text;
			queryParams.value.mwp = e.detail.value[2].text;
		}
	};

	// 获取墓地列表
	const getList = async () => {
		try {
			uni.showLoading({ title: '墓位获取中...', mask: true });
			refreshTime.value = UTILFormatDate(new Date(), 'YYYY-MM-DD HH:mm:ss');
			const { code, rows, total } = queryParams.value.szxm ? await ApiGetCemeteryBySzxm(queryParams.value) : await ApiGetCemeteryList(queryParams.value);
			if (code === 200) {
				rows.forEach((item) => {
					item.isExpired = isDateExpired(item.yxrq);
				});
				searchResults.value = [...searchResults.value, ...rows];
				searchResultsCount.value = total;
				searchResultsEmpty.value = searchResults.value.length === 0;
				console.log('🚀 ~ getList ~ searchResults.value:', searchResults.value);
			}
		} catch (error) {
			console.log('getList', error);
		} finally {
			uni.hideLoading();
		}
	};

	// 初始化
	const init = () => {
		searchResults.value = [];
		searchResultsCount.value = 0;
		searchResultsEmpty.value = true;
		queryParams.value.pageNum = 1;
	};

	// 获取园区数据
	const getParkData = async () => {
		try {
			// 获取存储数据
			uni.showLoading({ title: '园区获取中...', mask: true });
			const { code, rows } = await ApiGetCemeteryAddress({
				ssgs: useCompanyStore().GetCurCompanyInfo().bm,
			});
			if (code === 200) {
				// 设置树形结构
				parkOptions.value = UTILCemeteryArrayToTree(rows);
				// 缓存数据
				useCompanyStore().setParkData({
					data: parkOptions.value,
					refreshTime: new Date().getTime(),
				});
			}
		} catch (error) {
			console.log('ApiGetCemeteryAddress', error);
		} finally {
			uni.hideLoading();
			// init();
			// getList();
		}
	};

	onLoad(() => {
		// 获取缓存数据
		const parkData = useCompanyStore().GetParkData();
		// 如果缓存数据存在，则判断是否需要重新获取数据
		if (parkData) {
			// 计算时间差
			const calcTime = new Date().getTime() - parkData.refreshTime;
			// 设置缓存时间为2小时 (2 * 60 * 60 * 1000 = 7200000)
			const cacheTime = 4 * 60 * 60 * 1000;
			if (calcTime > cacheTime) {
				getParkData();
			} else {
				parkOptions.value = parkData.data;
				// init();
				// getList();
			}
		} else getParkData();
	});

	// 组件卸载时停止倒计时
	onUnmounted(() => {
		stop();
	});
</script>
<style lang="scss" scoped>
	.main-content {
		display: flex;
		gap: 15px;
		height: calc(100vh - 130px);

		:deep(.uni-icons) {
			font-size: 14px !important;
		}
	}

	.detail-popup-manage {
		:deep(.uni-icons) {
			font-size: 18px !important;
		}
	}

	.search-section {
		flex: 1;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);

		:deep(.uni-easyinput__content) {
			background-color: transparent !important;
		}

		.search-header {
			background: linear-gradient(135deg, #3f4c6b, #606c88);
			padding: 20px;
			border-radius: 12px 12px 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px;

			.title-area {
				display: flex;
				align-items: center;

				.title-icon {
					width: 24px;
					height: 24px;
					margin-right: 10px;
				}

				.title {
					font-size: 20px;
					color: #fff;
					font-weight: 600;
				}
			}

			.subtitle {
				color: rgba(255, 255, 255, 0.85);
				font-size: 12px;
				opacity: 0.6;
			}
		}

		.search-form {
			padding: 20px;

			.form-group {
				margin-bottom: 20px;

				.label {
					font-size: 15px;
					color: #333;
					margin-bottom: 10px;
					display: block;
					font-weight: 500;
				}
			}

			.input-wrapper {
				background: #f5f7fa;
				border-radius: 8px;
				padding: 0 15px;
				height: 45px;
				display: flex;
				align-items: center;
				border: 1px solid #e8e8e8;

				&:focus-within {
					border-color: #606c88;
				}
			}

			.input-row {
				display: flex;
				gap: 15px;
			}

			.flex-1 {
				flex: 1;
			}

			.search-actions {
				display: flex;
				gap: 15px;
				margin-top: 30px;

				.reset-btn,
				.search-btn {
					flex: 1;
					height: 45px;
					border-radius: 8px;
					font-size: 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 6px;

					&:active {
						opacity: 0.9;
					}
				}

				.reset-btn {
					background: #f5f7fa;
					border: 1px solid #e8e8e8;
					color: #666;

					&:hover {
						background: #eef0f5;
					}
				}

				.search-btn {
					background: linear-gradient(135deg, #3f4c6b, #606c88);
					border: none;
					color: #fff;

					&:hover {
						background: linear-gradient(135deg, #4a5980, #6b7ba0);
					}
				}
			}

			.quick-tips {
				margin-top: 15px;
				display: flex;
				justify-content: center;
				flex-direction: column;
				gap: 15px;

				.tip-item {
					display: flex;
					align-items: center;
					gap: 5px;
					color: #999;
					font-size: 13px;
					position: relative;
					z-index: 1;
				}

				.refresh-link {
					display: flex;
					align-items: center;
					gap: 4px;
					margin-left: 8px;
					color: #4a90e2;
					cursor: pointer;

					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}

	.result-section {
		flex: 1.2;
		padding: 15px;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
		width: 100%;
		height: 100%;

		.pagination-container {
			display: flex;
			justify-content: center;
			margin-top: 10px;
		}

		.result-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			padding-bottom: 15px;
			border-bottom: 1px solid #eee;

			.header-left {
				display: flex;
				align-items: center;
				gap: 8px;

				.result-title {
					font-size: 18px;
					font-weight: 600;
					color: #333;
				}

				.result-count {
					font-size: 14px;
					color: #666;
				}
			}

			.update-time {
				font-size: 13px;
				color: #999;
			}
		}

		.empty-result {
			display: flex;
			flex-direction: column;
			align-items: center;

			.empty-icon {
				width: 220px;
				height: 220px;
			}

			.empty-text {
				font-size: 16px;
				color: #333;
				margin-bottom: 8px;
			}

			.empty-desc {
				font-size: 14px;
				color: #999;
			}
		}

		.result-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
			padding: 10px;
		}

		.result-grid-container {
			width: 100%;
			height: calc(100% - 90px);
			overflow-y: scroll;
		}

		.result-card {
			background: #fff;
			border-radius: 12px;
			padding: 20px;
			border: 1px solid #eee;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 8px 24px rgba(96, 108, 136, 0.12);

				.card-decoration {
					.corner-pattern {
						opacity: 1;
					}

					.side-line {
						height: 80%;
					}
				}
			}

			.card-decoration {
				.corner-pattern {
					position: absolute;
					top: 0;
					right: 0;
					width: 60px;
					height: 60px;
					background: linear-gradient(135deg, transparent 48%, rgba(96, 108, 136, 0.1) 50%);
					opacity: 0.6;
					transition: all 0.3s ease;
				}

				.side-line {
					position: absolute;
					left: 0;
					top: 10%;
					width: 3px;
					height: 60%;
					background: linear-gradient(to bottom, #3f4c6b, #606c88);
					border-radius: 3px;
					transition: all 0.3s ease;
				}
			}

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15px;
				padding-bottom: 15px;
				border-bottom: 1px dashed #eee;

				.location-wrapper {
					display: flex;
					align-items: center;
					gap: 6px;

					.location {
						font-size: 16px;
						font-weight: 500;
						color: #333;
					}
				}

				.status-tag {
					display: flex;
					align-items: center;
					gap: 4px;
					padding: 4px 10px;
					border-radius: 0 0 0 20px;
					font-size: 12px;
					position: absolute;
					right: 0;
					top: 0;

					&.normal {
						background: rgba(24, 144, 255, 0.1);
						color: #1890ff;
					}

					&.expired {
						background: rgba(255, 77, 79, 0.1);
						color: #ff4d4f;
					}
				}
			}

			.card-body {
				.info-row {
					display: flex;
					align-items: flex-start;
					margin-bottom: 12px;

					.info-icon {
						margin-right: 8px;
						// padding-top: 2px;
					}

					.info-content {
						flex: 1;
						display: flex;
						align-items: baseline;

						.no-expired-text {
							color: #e1cc13;
							font-size: 14px;
							margin-left: 4px;
						}

						.label {
							color: #666666;
							font-size: 14px;
						}

						.deceased-names {
							color: #333;
							font-size: 14px;
							margin-left: 4px;
							flex: 1;
						}

						.date {
							margin-left: 8px;
							&.expired-text {
								color: #ff4d4f;
							}
						}
					}
				}
			}

			.card-footer {
				margin-top: 20px;

				.action-btn {
					width: 100%;
					height: 36px;
					border-radius: 18px;
					font-size: 14px;
					border: none;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 6px;

					&.normal-btn {
						background: linear-gradient(135deg, #3f4c6b, #606c88);
						color: #fff;

						&:hover {
							background: linear-gradient(135deg, #4a5980, #6b7ba0);
						}
					}

					&.expired-btn {
						background: linear-gradient(135deg, #ff4d4f, #ff7875);
						color: #fff;

						&:hover {
							background: linear-gradient(135deg, #ff6b6b, #ff8f8f);
						}
					}

					&.detail-btn {
						background: linear-gradient(135deg, #36d1dc, #5b86e5);
						color: #fff;

						&:hover {
							background: linear-gradient(135deg, #3ddbe6, #6590e9);
						}
					}

					&:active {
						transform: scale(0.98);
					}
				}
			}
		}
	}

	.detail-popup {
		width: 520px;
		background: #fff;
		border-radius: 15px;

		.empty-fee {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30px 20px;
			text-align: center;

			image {
				width: 120px;
				height: 120px;
				margin-bottom: 15px;
				opacity: 0.8;
			}

			.empty-fee-title {
				font-size: 16px;
				color: #606c88;
				font-weight: 500;
				margin-bottom: 8px;
			}

			.empty-fee-desc {
				font-size: 14px;
				color: #999;
				line-height: 1.5;
			}
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: linear-gradient(135deg, #4a90e2, #357abd);
			color: #fff;
			border-radius: 15px 15px 0 0;

			.title {
				font-size: 18px;
				font-weight: 500;
			}
		}

		.popup-content {
			padding: 10px 20px;
			padding-bottom: 100px;
			box-sizing: border-box;
			height: 82vh;
			overflow-y: auto;

			.main-info {
				padding: 15px;
				background: #f8f9fc;
				border-radius: 12px;
				margin-bottom: 15px;

				.info-header {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.location-tag {
						display: flex;
						align-items: center;
						gap: 8px;
						font-size: 16px;
						font-weight: 500;
						color: #606c88;
					}

					.status-badge {
						display: flex;
						align-items: center;
						gap: 4px;
						padding: 6px 12px;
						border-radius: 20px;
						font-size: 13px;

						&.active {
							background: rgba(103, 194, 58, 0.1);
							color: #67c23a;
						}

						&.expired {
							background: rgba(245, 108, 108, 0.1);
							color: #f56c6c;
						}
					}
				}
			}

			.detail-section {
				margin-bottom: 15px;
				background: #fff;
				border-radius: 12px;
				padding: 20px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

				.section-header {
					display: flex;
					align-items: center;
					gap: 8px;
					margin-bottom: 15px;
					font-size: 15px;
					font-weight: 500;
					color: #333;
				}

				.deceased-list {
					display: flex;
					flex-wrap: wrap;
					gap: 10px;

					.deceased-item {
						padding: 6px 12px;
						background: #f8f9fc;
						border-radius: 6px;
						color: #606c88;
					}
				}

				.contact-info {
					background: #f8f9fc;
					border-radius: 8px;
					padding: 15px;

					.info-item {
						display: flex;
						align-items: center;
						padding: 8px 0;

						&:not(:last-child) {
							border-bottom: 1px dashed rgba(96, 108, 136, 0.1);
						}

						.label {
							width: 80px;
							color: #666;
							font-size: 14px;
						}

						.value-wrapper {
							flex: 1;
							display: flex;
							align-items: center;
							gap: 8px;

							.value {
								color: #333;
								font-size: 15px;
								margin-left: 4px;

								&:empty::before {
									content: '暂无信息';
									color: #999;
									font-style: italic;
								}
							}

							.call-btn {
								background: linear-gradient(135deg, #4caf50, #45a049);
								border: none;
								border-radius: 15px;
								padding: 4px 12px;
								display: flex;
								align-items: center;
								gap: 4px;
								margin-left: auto;

								text {
									color: #fff;
									font-size: 12px;
								}

								&:active {
									transform: scale(0.98);
								}

								&:hover {
									background: linear-gradient(135deg, #45a049, #409444);
								}
							}
						}
					}
				}

				.fee-info {
					background: #f8f9fc;
					border-radius: 8px;
					padding: 15px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.fee-item {
						display: flex;
						align-items: center;
						padding: 10px 0;

						.label {
							width: 80px;
							color: #666;
							font-size: 14px;
						}

						.fee-value {
							display: flex;
							align-items: baseline;

							.currency {
								color: #ff6b6b;
								font-size: 16px;
								margin-right: 2px;
							}

							.amount {
								color: #ff6b6b;
								font-size: 24px;
								font-weight: 600;
								font-family: DIN Alternate, Arial;
							}

							.unit {
								color: #999;
								font-size: 14px;
							}
						}

						.date-value {
							display: flex;
							align-items: center;
							gap: 8px;

							.value {
								font-size: 15px;
								color: #333;
								font-weight: 500;

								&.expired-text {
									color: #ff4d4f;
								}
							}

							.expired-tag {
								display: flex;
								align-items: center;
								gap: 4px;
								background: rgba(255, 77, 79, 0.1);
								padding: 2px 8px;
								border-radius: 4px;
								font-size: 12px;
								color: #ff4d4f;
							}
						}
					}

					.divider {
						height: 1px;
						background: linear-gradient(to right, rgba(96, 108, 136, 0.08), rgba(96, 108, 136, 0.15), rgba(96, 108, 136, 0.08));
						margin: 4px 0;
					}
				}
			}

			.service-section {
				.service-card {
					display: flex;
					align-items: center;
					padding: 20px;
					background: linear-gradient(135deg, #606c88, #3f4c6b);
					border-radius: 12px;
					cursor: pointer;

					.service-icon {
						width: 48px;
						height: 48px;
						border-radius: 24px;
						background: rgba(255, 255, 255, 0.2);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 15px;
					}

					.service-info {
						flex: 1;

						.title {
							font-size: 16px;
							color: #fff;
							margin-bottom: 4px;
						}

						.desc {
							font-size: 13px;
							color: rgba(255, 255, 255, 0.8);
						}
					}
				}
			}
		}
		.popup-footer {
			padding: 15px;
			text-align: center;
			background: #f8f8f8;
			border-top: 1px solid #eee;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 0 0 15px 15px;
			display: flex;
			gap: 15px;
			justify-content: center;

			.close-btn,
			.renew-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 30px;
				height: 38px;
				font-size: 14px;
				border: none;
				width: 220px;
				border-radius: 38px;
				transition: all 0.3s ease;
				gap: 6px;

				&:hover {
					transform: translateY(-1px);
				}

				&:active {
					transform: translateY(0);
				}
			}

			.close-btn {
				color: #fff;
				background: linear-gradient(135deg, #606c88, #3f4c6b);
				box-shadow: 0 2px 6px rgba(74, 144, 226, 0.2);

				&:hover {
					box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
				}
			}

			.renew-btn {
				color: #fff;
				background: linear-gradient(135deg, #ff4d4f, #ff7875);
				box-shadow: 0 2px 6px rgba(255, 77, 79, 0.2);

				&:hover {
					box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
				}
			}
		}
	}

	.renewal-popup {
		width: 520px;
		background: #fff;
		border-radius: 15px;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: linear-gradient(135deg, #4a90e2, #357abd);
			color: #fff;
			border-radius: 15px 15px 0 0;

			.title {
				font-size: 18px;
				font-weight: 500;
			}
		}

		.popup-content {
			padding: 10px 20px;
			height: 82vh;
			padding-bottom: 100px;
			box-sizing: border-box;
			overflow-y: auto;

			.section-header {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-bottom: 15px;
				font-size: 16px;
				font-weight: 500;
				color: #333;
			}

			.fee-detail-section {
				margin-bottom: 15px;

				.fee-title {
					display: flex;
					flex-direction: column;
					gap: 8px;
					background: rgba(96, 108, 136, 0.08);
					padding: 12px 16px;
					border-radius: 8px;
					margin-bottom: 15px;
					border-left: 4px solid #606c88;

					.fee-icon {
						display: flex;
						gap: 8px;
					}

					text {
						font-size: 15px;
						color: #333;
						font-weight: 500;
					}

					.fee-subtitle {
						text {
							font-size: 13px;
							color: #666;
							font-weight: normal;
						}
					}
				}

				.fee-card {
					background: linear-gradient(to bottom, #ffffff, #f8f9fc);
					border-radius: 16px;
					padding: 0px 24px;
					box-shadow: 0 4px 20px rgba(96, 108, 136, 0.08);
					border: 1px solid rgba(96, 108, 136, 0.1);

					.fee-row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10px 0;

						&:not(:last-child) {
							border-bottom: 1px dashed rgba(96, 108, 136, 0.12);
						}

						.label {
							color: #666;
							font-size: 15px;
							font-weight: 500;
						}

						.value-wrapper {
							display: flex;
							align-items: center;
							gap: 8px;
							background: rgba(96, 108, 136, 0.05);
							padding: 8px 16px;
							border-radius: 20px;

							.value {
								color: #333;
								font-size: 15px;
								font-weight: 500;
							}
						}

						.fee-amount {
							display: flex;
							align-items: center;
							gap: 8px;

							.amount-tag {
								background: rgba(255, 107, 107, 0.1);
								padding: 8px 16px;
								border-radius: 20px;
								display: flex;
								align-items: baseline;

								.currency {
									color: #ff6b6b;
									font-size: 16px;
									margin-right: 2px;
								}

								.number {
									font-size: 22px;
									font-weight: 600;
									color: #ff6b6b;
									font-family: DIN Alternate, Arial;
								}
							}

							.unit {
								color: #999;
								font-size: 14px;
							}
						}

						.year-selector {
							display: flex;
							gap: 12px;

							.year-btn {
								min-width: 80px;
								padding: 8px 16px;
								border-radius: 20px;
								border: 1px solid #e8e8e8;
								background: #fff;
								display: flex;
								flex-direction: column;
								align-items: center;
								transition: all 0.3s ease;

								.year-text {
									font-size: 16px;
									font-weight: 500;
									color: #666;
								}

								.year-unit {
									font-size: 12px;
									color: #999;
									margin-top: 2px;
								}

								&.active {
									background: linear-gradient(135deg, #4a90e2, #357abd);
									border: none;
									transform: translateY(-1px);
									box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);

									.year-text,
									.year-unit {
										color: #fff;
									}
								}

								&:hover:not(.active) {
									border-color: #4a90e2;
									transform: translateY(-1px);
								}
							}
						}
					}

					&.total {
						margin-top: 10px;
						padding-top: 20px;
						border-top: 2px solid rgba(96, 108, 136, 0.1);

						.total-amount {
							display: flex;
							align-items: center;
							gap: 12px;

							.amount-wrapper {
								background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
								padding: 10px 20px;
								border-radius: 24px;
								display: flex;
								align-items: baseline;
								box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2);

								.currency {
									color: #fff;
									font-size: 18px;
									margin-right: 2px;
								}

								.number {
									font-size: 28px;
									font-weight: 600;
									color: #fff;
									font-family: DIN Alternate, Arial;
								}
							}

							.total-tag {
								background: rgba(255, 107, 107, 0.1);
								color: #ff6b6b;
								padding: 4px 12px;
								border-radius: 12px;
								font-size: 12px;
								font-weight: 500;
							}
						}
					}
				}
			}

			.handler-section {
				.form-group {
					background: #f8f9fc;
					border-radius: 12px;
					padding: 20px;
					display: flex;
					gap: 20px;

					.input-item {
						flex: 1;
						&:last-child {
							margin-bottom: 0;
						}

						.label {
							display: block;
							color: #666;
							font-size: 14px;
							margin-bottom: 8px;
						}

						.input-wrapper {
							display: flex;
							align-items: center;
							background: #fff;
							border: 1px solid #e8e8e8;
							border-radius: 8px;
							padding: 0 15px;
							height: 45px;

							&:focus-within {
								border-color: #4a90e2;
							}

							.input {
								flex: 1;
								margin-left: 10px;
								font-size: 15px;
							}
						}
					}
				}
			}
		}

		.popup-footer {
			padding: 15px;
			text-align: center;
			background: #f8f8f8;
			border-top: 1px solid #eee;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 0 0 15px 15px;
			display: flex;
			gap: 15px;
			justify-content: center;

			button {
				width: 220px;
				height: 38px;
				border-radius: 38px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
				font-size: 15px;

				&.cancel-btn {
					background: linear-gradient(135deg, #606c88, #3f4c6b);
					color: #fff;

					&:hover {
						background: linear-gradient(135deg, #6b7ba0, #4a5980);
					}
				}

				&.confirm-btn {
					background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
					color: #fff;

					&:hover {
						background: linear-gradient(135deg, #ff8f8f, #ff6b6b);
					}
				}

				&:active {
					transform: scale(0.98);
				}
			}
		}
	}

	.qrcode-popup {
		width: 560px;
		background: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);

		.payment-error-tip {
			margin-top: 15px;
			display: flex;
			gap: 6px;
			padding: 8px 16px;
			background: #fff2f0;
			border-radius: 12px;
			border: 1px dashed rgba(255, 77, 79, 0.2);

			.payment-error-tip-text {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				gap: 6px;
			}

			text {
				color: #ff4d4f;
				font-size: 12px;
			}
		}

		.popup-header {
			background: #606c88;
			padding: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			overflow: hidden;
			z-index: 10;
			box-sizing: border-box;

			&::after {
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				width: 140px;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
			}

			.title {
				font-size: 16px;
				color: #fff;
				font-weight: 500;
				letter-spacing: 1px;
			}
		}

		.popup-content {
			padding: 10px 20px;
			background: linear-gradient(to bottom, #f8f9fc, #fff);
			padding-bottom: 100px;
			box-sizing: border-box;
			height: 82vh;
			overflow-y: auto;

			.payment-info {
				display: flex;
				gap: 15px;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					top: 10%;
					height: 80%;
					width: 1px;
					background: linear-gradient(to bottom, transparent, rgba(96, 108, 136, 0.12), transparent);
				}

				.left-section {
					flex: 1;

					.amount-display {
						background: #606c88;
						padding: 10px 20px;
						border-radius: 12px;
						position: relative;
						overflow: hidden;
						box-shadow: 0 4px 15px rgba(96, 108, 136, 0.15);

						&::before {
							content: '';
							position: absolute;
							right: -20px;
							top: -20px;
							width: 100px;
							height: 100px;
							background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1));
							border-radius: 50%;
						}

						.label {
							display: flex;
							align-items: center;
							gap: 8px;
							color: rgba(255, 255, 255, 0.9);
							font-size: 15px;
							margin-bottom: 10px;
							position: relative;
						}

						.amount {
							background: rgba(255, 255, 255, 0.1);
							padding: 10px;
							border-radius: 8px;
							text-align: center;
							backdrop-filter: blur(4px);
							border: 1px solid rgba(255, 255, 255, 0.2);

							.currency {
								color: #fff;
								font-size: 20px;
								margin-right: 4px;
								opacity: 0.9;
							}

							.number {
								color: #fff;
								font-size: 38px;
								font-weight: 500;
								font-family: DIN Alternate, Arial;
								text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
							}
						}
					}

					.countdown-section {
						text-align: center;
						margin: 20px 0;
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;

						.countdown-ring {
							width: 100px;
							height: 100px;
							border: 3px solid #eef0f5;
							border-radius: 50%;
							display: inline-flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							position: relative;
							margin-bottom: 12px;
							box-shadow: inset 0 2px 8px rgba(96, 108, 136, 0.08);

							&::before {
								content: '';
								position: absolute;
								top: -3px;
								left: -3px;
								right: -3px;
								bottom: -3px;
								border-radius: 50%;
								border: 3px solid #606c88;
								border-top-color: transparent;
								animation: rotate 1s linear infinite;
							}

							&.warning {
								&::before {
									border-color: #ff4d4f;
									border-top-color: transparent;
								}
							}

							.time {
								font-size: 32px;
								color: #606c88;
								font-weight: 500;
								font-family: DIN Alternate, Arial;

								&.warning-text {
									color: #ff4d4f;
								}
							}

							.unit {
								font-size: 14px;
								color: #999;
								margin-top: 2px;

								&.warning-text {
									color: #ff4d4f;
								}
							}
						}

						.countdown-text {
							color: #666;
							font-size: 14px;
							position: relative;
							display: inline-block;
							padding: 6px 16px;
							background: #f8f9fc;
							border-radius: 12px;
							box-shadow: 0 2px 6px rgba(96, 108, 136, 0.08);

							&.warning-text {
								color: #ff4d4f;
								background: #fff2f0;
							}
						}
					}

					.payment-tips {
						background: #fff2f0;
						border-radius: 12px;
						padding: 10px 20px;
						position: relative;
						border: 1px solid rgba(255, 77, 79, 0.15);
						box-shadow: 0 2px 8px rgba(255, 77, 79, 0.05);

						.tip-header {
							display: flex;
							align-items: center;
							gap: 8px;
							color: #ff4d4f;
							font-size: 12px;
							font-weight: 500;
							margin-bottom: 15px;
							padding-bottom: 12px;
							border-bottom: 1px dashed rgba(255, 77, 79, 0.2);

							.uni-icons {
								background: rgba(255, 77, 79, 0.1);
								width: 24px;
								height: 24px;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}

						.tip-list {
							.tip-item {
								position: relative;
								padding-left: 15px;
								margin-bottom: 10px;
								color: #ff4d4f;
								font-size: 12px;
								display: flex;
								align-items: center;

								&::before {
									content: '■';
									position: absolute;
									left: 0;
									font-size: 8px;
									opacity: 0.8;
								}

								&:last-child {
									margin-bottom: 0;
								}
							}
						}
					}
				}

				.right-section {
					flex: 1;
					display: flex;
					flex-direction: column;
					// align-items: center;
					// justify-content: center;

					.qrcode-container {
						background: #fff;
						padding: 25px;
						border-radius: 12px;
						border: 1px solid #eef0f5;
						text-align: center;
						position: relative;
						box-shadow: 0 4px 20px rgba(96, 108, 136, 0.08);

						&::before {
							content: '';
							position: absolute;
							left: 10px;
							right: 10px;
							top: 10px;
							bottom: 10px;
							border: 1px dashed rgba(96, 108, 136, 0.15);
							border-radius: 8px;
							pointer-events: none;
						}

						.qrcode {
							width: 200px;
							height: 200px;
							margin-bottom: 20px;
							padding: 10px;
							background: #fff;
							border-radius: 8px;
							box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
						}
					}

					.scan-tips {
						background: linear-gradient(135deg, #4caf50, #45a049);
						padding: 16px 30px;
						border-radius: 16px;
						display: flex;
						align-items: center;
						gap: 10px;
						box-shadow: 0 8px 20px rgba(76, 175, 80, 0.2);
						position: relative;
						overflow: hidden;
						transition: all 0.3s ease;

						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: -100%;
							width: 100%;
							height: 100%;
							background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
							animation: shine 2s infinite;
						}

						.scan-icon-wrapper {
							background: rgba(255, 255, 255, 0.2);
							padding: 10px;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.scan-text-wrapper {
							display: flex;
							flex-direction: column;
							gap: 4px;

							.primary-text {
								color: #fff;
								font-size: 12px;
								font-weight: 500;
							}

							.secondary-text {
								color: rgba(255, 255, 255, 0.9);
								font-size: 12px;
							}
						}

						&:hover {
							transform: translateY(-2px);
							box-shadow: 0 12px 24px rgba(76, 175, 80, 0.25);
						}
					}
				}
			}
		}

		.popup-footer {
			padding: 15px;
			text-align: center;
			background: #f8f8f8;
			border-top: 1px solid #eee;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 0 0 15px 15px;
			display: flex;
			gap: 15px;
			justify-content: center;

			.cancel-btn {
				background: linear-gradient(135deg, #606c88, #3f4c6b);
				color: #fff;
				border: none;
				height: 38px;
				width: 220px;
				border-radius: 38px;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
				box-shadow: 0 2px 8px rgba(96, 108, 136, 0.15);
				transition: all 0.3s ease;

				&:hover {
					transform: translateY(-1px);
					box-shadow: 0 4px 12px rgba(96, 108, 136, 0.25);
				}

				&:active {
					transform: translateY(0);
				}
			}
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes shine {
		to {
			left: 100%;
		}
	}

	.countdown-section {
		.countdown-ring {
			&.warning {
				&::before {
					border-color: #ff4d4f;
					border-top-color: transparent;
				}
			}

			.time {
				&.warning-text {
					color: #ff4d4f;
				}
			}
		}

		.countdown-text {
			&.warning-text {
				color: #ff4d4f;
				background: #fff2f0;
			}
		}
	}

	:deep(.uni-dialog-content) {
		padding: 10px 0;
	}

	.dialog-content {
		padding: 20px;
		width: 100%;

		.dialog-icon {
			text-align: center;
			margin-bottom: 20px;

			.uni-icons {
				background: rgba(96, 108, 136, 0.1);
				padding: 15px;
				border-radius: 50%;
			}
		}

		.dialog-info {
			background: #f8f9fc;
			border-radius: 12px;
			padding: 8px 30px;
			margin-bottom: 15px;

			.info-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20px 0;

				&:not(:last-child) {
					border-bottom: 1px dashed rgba(96, 108, 136, 0.1);
				}

				.label {
					color: #666;
					font-size: 14px;
				}

				.value {
					color: #333;
					font-size: 15px;
					font-weight: 500;
				}

				.amount {
					display: flex;
					align-items: baseline;

					.currency {
						color: #ff6b6b;
						font-size: 14px;
						margin-right: 2px;
					}

					.number {
						color: #ff6b6b;
						font-size: 20px;
						font-weight: 600;
						font-family: DIN Alternate, Arial;
					}
				}
			}
		}

		.dialog-tips {
			display: flex;
			align-items: center;
			gap: 6px;
			justify-content: center;
			color: #999;
			font-size: 13px;
		}
	}

	:deep(.uni-popup-dialog) {
		border-radius: 16px;
		overflow: hidden;
		width: 380px;

		.uni-dialog-button {
			height: 60px;
		}

		.uni-dialog-title {
			padding: 20px;
			background: linear-gradient(135deg, #606c88, #3f4c6b);
			color: #fff;
		}

		.uni-dialog-button-group {
			border-top: 1px solid #eee;

			button {
				font-size: 15px;
				height: 48px;
				line-height: 48px;

				&.uni-button-color {
					color: #606c88;

					&:active {
						opacity: 0.8;
					}
				}

				&.uni-button-color-primary {
					background: linear-gradient(135deg, #606c88, #3f4c6b);
					color: #fff;

					&:active {
						opacity: 0.9;
					}
				}
			}
		}
	}

	.print-invoice-popup {
		background-color: #fff;
		border-radius: 12rpx;
		width: 600rpx;
		padding: 30rpx;

		.popup-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;
			margin-bottom: 40rpx;

			text {
				font-size: 28rpx;
				color: #333;
			}
		}

		.popup-buttons {
			display: flex;
			justify-content: space-between;
			gap: 20rpx;

			button {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 8rpx;
			}

			.btn-cancel {
				background-color: #f5f5f5;
				color: #666;
			}

			.btn-confirm {
				background-color: #007aff;
				color: #fff;
			}
		}
	}
</style>
